<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
</head>
<body>
    <div id="root">
        <p> record: {{ record }}</p>
        <counter>
            <template v-slot:default="slotProps">
                你已经点击了 {{ record = slotProps.count }} 次
            </template>
        </counter>
    </div>

    <!-- 导入 vue.js 3.x 核心库 -->
    <script src="../scripts/vue@3.2.31.js"></script>

    <script>
        const Counter = {
            template: `<div>
                           <slot :count="value"></slot>
                           <hr>
                           <button @click="increase">增加</button>
                       </div>`,
            data(){
                return { value: 100 } 
            },
            methods: {
                increase(){
                    console.log( 'increase' );
                    this.value++ ;
                }
            }
        }
        const options = {
            // 注册子组件(局部注册)
            components: {
                'counter': Counter
            },
            data(){
                return { record : 0 }
            }
        }
        Vue.createApp(options).mount('#root');
    </script>
</body>
</html>